<template>
	<div>
		<div class="topTitle">试题分类</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="handleEdit" style="float:right">新增
				</el-button>
				<el-input v-model="query.name" placeholder="分类名称" class="width400 mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="综合分类" name="first">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
						<el-table-column prop="name" label="分类名称"></el-table-column>
						<el-table-column label="分类类型">
							<template slot-scope="scope">
								{{ scope.row.type | formatType }}
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="排序"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">
									编辑 </el-button>
								<el-button type="text" icon="el-icon-delete" class="red"
									@click="handleDelete(scope.$index, scope.row)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="模块分类" name="second">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
						<el-table-column prop="name" label="分类名称"></el-table-column>
						<el-table-column label="分类类型">
							<template slot-scope="scope">
								{{ scope.row.type | formatType }}
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="排序"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">
									编辑 </el-button>
								<el-button type="text" icon="el-icon-delete" class="red"
									@click="handleDelete(scope.$index, scope.row)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="章节分类" name="third">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
						<el-table-column prop="name" label="分类名称"></el-table-column>
						<el-table-column label="分类类型">
							<template slot-scope="scope">
								{{ scope.row.type | formatType }}
							</template>
						</el-table-column>
						<el-table-column label="章节颜色">
							<template slot-scope="scope">
								<div class="width50 height50" :style="{'background-color': scope.row.color?scope.row.color:''}">
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="排序"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">
									编辑 </el-button>
								<el-button type="text" icon="el-icon-delete" class="red"
									@click="handleDelete(scope.$index, scope.row)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="小试题分类" name="four">
					<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
						<el-table-column prop="name" label="分类名称"></el-table-column>
						<el-table-column label="分类类型">
							<template slot-scope="scope">
								小试题分类
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="排序"></el-table-column>
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">
									编辑 </el-button>
								<el-button type="text" icon="el-icon-delete" class="red" @click="handleSmallDelete(scope.row)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="titleName" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="ID">
					<el-input v-model="form.id" value="row.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="类别">
					<el-radio-group v-model="form.type">
						<el-radio :label="0">综合分类</el-radio>
						<el-radio :label="1">模块分类</el-radio>
						<el-radio :label="2">章节分类</el-radio>
						<el-radio :label="3">小试题分类</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="分类名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="章节颜色" v-if="form.type==2">
					<el-color-picker v-model="form.color"></el-color-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="addQuestionSort()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					name: '',
					type: '',
					pageNumber: 1,
					pageSize: 30
				},
				editVisible: false,
				pageTotal: 0,
				form: {},
				activeName: 'first',
				//三组表格数据
				tableData: [],
				titleName: "",
				type: 0
			};
		},
		filters: {
			formatType(value) {
				if (value == 0) {
					return '综合分类';
				} else if (value == 1) {
					return '模块分类';
				} else if (value == 2) {
					return '章节分类';
				} else if (value == 3) {
					return '小试题分类';
				}
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			//点击tab刷新数据
			handleClick(tab) {
				this.type = Number(tab.index)
				this.getData();
			},
			//获取数据
			getData() {
				this.query.type = this.type
				if (this.type == 3) {
					this.$postForm('/admin/question/classAll', this.query)
						.then(res => {
							if (res.code == 1000) {
								this.tableData = res.data.list;
								this.pageTotal = res.data.totalRow;
							}
						});
				} else {
					this.$get('/admin/question/getQuestionSort', this.query)
						.then(res => {
							if (res.code == 1000) {
								this.tableData = res.data.list;
								this.pageTotal = res.data.totalRow;
							}
						});
				}

			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData()
			},
			handleRefresh() {
				this.query.name = '';
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(async () => {
						const res = await this.$post('/admin/question/deleteQuestCategory', {
							id: row.id
						})
						if (res.code == 1000) {
							this.$message.success('删除成功')
							this.getData()
						}
					}).catch(() => {});
			},
			//删除小试题
			handleSmallDelete(row) {
				this.$confirm('确定要删除吗？', '提示', {
						type: 'warning'
					})
					.then(async () => {
						const res = await this.$postForm('/admin/question/classDelete', {
							id: row.id
						})
						if (res.code == 1000) {
							this.$message.success('删除成功')
							this.getData()
						}
					}).catch(() => {});
			},
			//编辑和新增的保存
			addQuestionSort() {
				if (this.form.type == 3) {
					if (this.form.id) {
						this.$post('/admin/question/classUpdate', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.form = {}
								this.editVisible = false
							}
						})
					} else {
						this.$post('/admin/question/classSave', this.form).then(res => {
							if (res.code == 1000) {
								this.$message.success('操作成功')
								this.getData()
								this.form = {}
								this.editVisible = false
							}
						})
					}
				} else {
					this.$post('/admin/question/saveCategory', this.form).then(res => {
						if (res.code == 1000) {
							this.$message.success('操作成功')
							this.getData()
							this.form = {}
							this.editVisible = false
						}
					})
				}


			},
			// 打开编辑操作
			handleEdit(row) {
				if (row.id) {
					this.titleName = "编辑"
					this.form = JSON.parse(JSON.stringify(row))
					if (this.type == 3) {
						this.form.type = 3
					}
				} else {
					this.titleName = "新增"
					this.form = {}
				}
				this.editVisible = true;
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData()
			},
			//每页条数
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 100px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	/deep/.el-tabs__item.is-active {
		background-color: #1890ff;
		color: white;
		border-radius: 3px;
	}
</style>